<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>考勤</title>
		<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/kaoqin.css"/>
		<script type="text/javascript" src="js/mui.min.js"></script>
		<style type="text/css">
			
			.mui-segmented-control-inverted{
				margin-top: 45px;
			}
			
			.mui-bar-nav {
                            top: 0;
                            -webkit-box-shadow: 0 1px 6px #ccc;
                            box-shadow: 0 1px 6px #ccc;
                }
                .mui-bar {
                    position: fixed;
                    z-index: 999;
                    right: 0;
                    left: 0;
                    height: 44px;
                    padding-right: 10px;
                    padding-left: 10px;
                    border-bottom: 0;
                    background-color: #f7f7f7;
                    -webkit-box-shadow: 0 0 1px rgba(0,0,0,.85);
                    box-shadow: 0 0 1px rgba(0,0,0,.85);
                    -webkit-backface-visibility: hidden;
                    backface-visibility: hidden;
                }
                .mui-pull-right {
                        float: right;
                }
                .mui-bar-footer {
                        bottom: 0;
                }
        #bcid{
             width: 100%;
             height: 80%;
             position: absolute;
                         top:1rem;
                         z-index: 1;
         }
         .fbt{
             color: #0E76E1;
             width: 50%;
             background-color: #ffffff;
             float: left;
             line-height: 44px;
             text-align: center;
         }
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav" id="mui_header1">
			<div class="mui_kaoqin">
				 <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		   		<h1 class="mui-title"style="color: white;">考勤</h1>
			</div>
	   </header>
		<div class="mui-slider">
		    <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
		        <a class="mui-control-item" href="#item1">缺勤</a>
		        <a class="mui-control-item" href="#item2">请假</a>
		    </div>
		    <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
		    <div class="mui-slider-group">
		        <div id="item1" class="mui-slider-item mui-control-content mui-active">
		          	<div class="div">
					    <ul class="clear div_one" id="div_one">
					        <li title="1"><span style="color: white;">1</span>JAN</li>
					        <li title="2"><span>2</span>FER</li>
					        <li title="3"><span>3</span>MAR</li>
					        <li title="4"><span>4</span>APR</li>
					        <li title="5"><span>5</span>MAY</li>
					        <li title="6"><span>6</span>JUN</li>
					        <li title="7"><span>7</span>JUL</li>
					        <li title="8"><span>8</span>AUG</li>
					        <li title="9"><span>9</span>SEP</li>
					        <li title="10"><span>10</span>OCT</li>
					        <li title="11"><span>11</span>NOV</li>
					        <li title="12"><span>12</span>DEC</li>
					    </ul>
		    			<div class="one_text">
					        <h1 id="text"></h1>
					        <form>
					            <input type="text" id="txt" value=""/>
					        </form>
	    				</div>
    				</div>
    				<div class="div_two">
    					<ul class="clear">
    						<li>日</li>
    						<li>一</li>
    						<li>二</li>
    						<li>三</li>
    						<li>四</li>
    						<li>五</li>
    						<li>六</li>
    					</ul>
					    <ul class="clear" id="div_two">
					    	<!--<li title="26" class="grey"><span>26</span></li>
					        <li title="27" class="grey"><span>27</span></li>
					        <li title="28" class="grey"><span>28</span></li>
					        <li title="29" class="grey"><span>29</span></li>
					        <li title="30" class="grey"><span>30</span></li>
					        <li title="31" class="grey"><span>31</span></li>-->
					        <li title="1" class="" id="row_alone"><span>1</span></li>
					        <li title="2" class=""><span>2</span></li>
					        <li title="3" class=""><span>3</span></li>
					        <li title="4" class=""><span>4</span></li>
					        <li title="5" class=""><span>5</span></li>
					        <li title="6"><span>6</span></li>
					        <li title="7"><span>7</span></li>
					        <li title="8"><span>8</span></li>
					        <li title="9"><span>9</span></li>
					        <li title="10"><span>10</span></li>
					        <li title="11"><span>11</span></li>
					        <li title="12"><span>12</span></li>
					        <li title="13"><span>13</span></li>
					        <li title="14"><span>14</span></li>
					        <li title="15"><span>15</span></li>
					        <li title="16"><span>16</span></li>
					        <li title="17"><span>17</span></li>
					        <li title="18"><span>18</span></li>
					        <li title="19"><span>19</span></li>
					        <li title="20"><span>20</span></li>
					        <li title="21"><span>21</span></li>
					        <li title="22"><span>22</span></li>
					        <li title="23"><span>23</span></li>
					        <li title="24"><span>24</span></li>
					        <li title="25"><span>25</span></li>
					        <li title="26"><span>26</span></li>
					        <li title="27"><span>27</span></li>
					        <li title="28"><span>28</span></li>
					        <li title="29"><span>29</span></li>
					        <li title="30"><span>30</span></li>
					        <!--<li title="1" class="grey"><span>1</span></li>
					        <li title="2" class="grey"><span>2</span></li>
					        <li title="3" class="grey"><span>3</span></li>
					        <li title="4" class="grey"><span>4</span></li>
					        <li title="5" class="grey"><span>5</span></li>
					        <li title="6" class="grey"><span>6</span></li>-->
					    </ul>
    				</div>
		        </div>
		        <div id="item2" class="mui-slider-item mui-control-content">
		            <ul class="mui-table-view">
		                <ul class="mui-table-view">
		                    <li class="mui-table-view-cell mui-media">
		                        <a href="javascript:;">
		                            <div class="mui-media-body">
		                               		 2018年09月01日 星期一上午8:00——11:00
		                                <p class="mui-ellipsis">病假。。。。</p>
		                            </div>
		                        </a>
		                    </li>
		                    <li class="mui-table-view-cell mui-media litwo">
		                        <a href="javascript:;">
		                            <div class="mui-media-body">
		                               		 2018年09月01日 星期一上午8:00——11:00
		                                <p class="mui-ellipsis">病假。。。。</p>
		                            </div>
		                        </a>
		                    </li>
		                    <li class="mui-table-view-cell mui-media">
		                        <a href="javascript:;">
		                            <div class="mui-media-body">
		                               		 2018年09月01日 星期一上午8:00——11:00
		                                <p class="mui-ellipsis">病假。。。。</p>
		                            </div>
		                        </a>
		                    </li>
		                </ul>
		            </ul>
		        </div>
		    </div>
		</div>
	    
	    
	</body>
	<script type="text/javascript">
		mui(".mui_kaoqin").on('tap',"#mui_kaoqin",function(){
				mui.openWindow({
					url:"yingyong.html",
					id:"yingyong.html"
				})
			})
		
		
		
		window.onload = function () {
        var time = new Date();
        var month = time.getMonth();
        var ndate = time.getDate();
/*        console.log(ndate);*/
        
        var arr = [
            "加油工作111111",
            "加油工作222222",
            "加油工作333333",
            "加油工作444444",
            "加油工作555555",
            "加油工作666666",
            "加油工作777777",
            "加油工作888888",
            "加油工作999999",
            "加油工作101010",
            "加油工作1111111",
            "加油工作1212112"
        ];
        
        var ul = document.getElementById("div_one");
        var li = ul.children;
        var length = li.length;
        
        var ul2 = document.getElementById("div_two");
        var li2 = ul2.children;
        var length2 = li2.length;
        
        var text = document.getElementById("txt");
        var monthText = document.getElementById("text");
        
        
         for(var j = 0; j < length2; j++){
        	(function (num){
        		if(num == ndate){
        			li2[num-1].className = 'mui_green';
        		}
        		
        		
        		li2[num].onclick = function () {
        			for (var i = 0; i < length2; i++) {
        				if (li2[i].className == 'mui_green') {
        					li2[i].className = '';
        				}
        			}

        			this.className = 'mui_green';	
        		}
        	}(j))
        }

        for (var i = 0; i < length; i++) {
            (function (num) {
                if (num == month) {
                    li[num].firstElementChild.style.color = "red";
                    li[num].className = "white";
                    text.value = arr[num];
                }
                li[num].onclick = function () {
                    var span = this.firstElementChild;
                    var pos = this.title;
                    for (var j = 0; j < length; j++) {
                        if (li[j].className == "white") {
                            li[j].className = "";
                        }
                        if (li[j].firstElementChild.style.color == "red") {
                            li[j].firstElementChild.style.color = "";
                        }
                    }
                    this.className = "white";
                    span.style.color = "red";
                    text.value = arr[pos - 1];
                }
            }(i));
        }
        
    };
	</script>
</html>
